<template>
	<div class="loginstyle" @mousedown="dragdown" @mousemove="dragmove" @mouseup="dragup">
		<div class="wxloginwarp">
			<el-form ref="forms" :model="form">
				<el-form-item>
					<el-input v-model="form.acount" placeholder="账号">
						<template #prepend>
							<i class="iconfont wx-user"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.password" placeholder="密码">
						<template #prepend>
							<i class="iconfont wx-mima"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-button type="primary" style="width: 100%;" @click="onSubmit">登录</el-button>

			</el-form>
		</div>
	</div>
</template>

<script setup>
	import {reactive,getCurrentInstance} from 'vue';
	import {useRouter} from 'vue-router';
	import {ElMessage} from 'element-plus';

	const router = useRouter();
	
	const form = reactive({
		acount: '',
		password: ''
	})
	
	const {proxy} = getCurrentInstance();
	
	const onSubmit = () => {
		localStorage.setItem("token", '123456')
		router.push("/home");
	}
	
	let startx,starty,x,y;
	let isdrag=false;
	const dragdown = (e) =>{
		isdrag=true;
		startx= e.clientX;
		starty= e.clientY;
	}
	
	const dragmove = (e) =>{
		if(isdrag){
			console.log(window.screenX,window.screenY)
			x= window.screenX + e.clientX - startx;
			y= window.screenY + e.clientY - starty;
			
			let coordinates = {x,y}
			console.log(coordinates)
			window.wxWindow.windowdrag(coordinates)
		}
	}
	
	const dragup = (e)=>{
		isdrag=false;
	}
	
</script>

<style scoped>
	.loginstyle {
		padding: 0;
		margin: 0;
		height: 100%;
		background-image: url('../../assets/images/login-bg.jpg');
		background-size: cover;
		background-position: 50% center;
	}

	.wxloginwarp {
		width: 300px;
		height: 150px;
		background: #fff;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 100px;
		margin: auto;
		padding: 60px 20px;
	}
</style>